import {View, Text, StyleSheet, Image, TextInput, TouchableOpacity} from 'react-native'
import React, {Component} from 'react'
import {Rating} from "react-native-elements";
import {padding, rectWithSize, default as styles} from "../../style";
import {OrderModelInterface} from "../../net/instance/CommenModelInstance";
import {inject, observer} from "mobx-react/custom";
import toast from "../../component/common/ToastProxy";
import {defaultObj} from "../../util";
import {Store} from "../../store";
import {Actions} from "react-native-router-flux";
import ProfileSettingWrapper from "../mine/profileSetting";
import OrderListWrapper from "../../component/page/mine/orders/orderList";
import Orders from "../mine/orders";

interface EvaluationProps extends Store {
    orderData: OrderModelInterface
}

interface EvaluationState {
    evaluateForm: {
        star: number,
        comment: string
    }
}

interface RouterProps {
    params: {
        orderData: OrderModelInterface
    }
}

export default class EvaluationWrapper extends Component {

    state = {orderData: defaultObj};

    onEnter(props: RouterProps) {

        this.setState(props.params);
    }


    render() {
        return <Evaluation {...this.state}/>
    }
}

@inject("evaluation")
@observer
class Evaluation extends Component<EvaluationProps, EvaluationState> {
    state = {
        evaluateForm: defaultObj
    };

    constructor(props: EvaluationProps) {
        super(props);
    }

    commentChange = (text: string) => {
        this.setState(({evaluateForm}) => {
            evaluateForm.comment = text;
            return {evaluateForm}
        })
    };

    submitForm = async () => {
        await this.props.evaluation.evaluateOrder(this.state.evaluateForm, this.props.orderData.id);
        toast("评价成功！", function () {
            Actions.pop();
            Actions.refresh({enterTime:new Date()});
        });
    };

    render() {
        return (<View style={EvaluationStyle.container}>
            <View style={[padding(6, 24), {backgroundColor: "#fff"}, EvaluationStyle.rowStyle]}>
                <Image style={rectWithSize(40)} source={require("../../assets/img/Bitmap.png")}/>
                <View style={[EvaluationStyle.rowStyle]}>
                    <Text style={{marginLeft: 10, fontSize: 12, color: "#999"}}>描述相符</Text>
                    <Rating
                        type="custom"
                        fractions={1}
                        startingValue={0}
                        imageSize={20}
                        ratingColor={"#FF9300"}
                        ratingBackgroundColor={"#ccc"}
                        onFinishRating={(star) => {
                            this.setState(pre => {
                                const evaluateForm = pre.evaluateForm;
                                evaluateForm.star = star;
                                return {evaluateForm}
                            })
                        }}
                        style={{paddingVertical: 10, marginLeft: 20}}
                    />
                </View>
            </View>
            <View style={[EvaluationStyle.inputContainer]}>
                <TextInput autoCorrect={true} autoCapitalize={"none"} onChangeText={this.commentChange}
                           underlineColorAndroid={"transparent"}
                           placeholderTextColor={"#999"} multiline={true} style={[{flex: 1, fontSize: 14}, padding(0)]}
                           placeholder={"说说它的优点和美中不足的地方吧~"}/>
            </View>
            <TouchableOpacity
                onPress={this.submitForm}
                style={[{
                    marginHorizontal: 20,
                    backgroundColor: "#629B36",
                    borderRadius: 5,
                    paddingVertical: 10,
                    marginTop: 30
                }, styles.centered]}>
                <Text style={{fontSize: 18, color: "#fff"}}>发布</Text>
            </TouchableOpacity>
        </View>)
    }
}

const EvaluationStyle = StyleSheet.create({
    container: {
        backgroundColor: "#EFEFEF"
    },
    rowStyle: {
        flexDirection: "row",
        alignItems: "center"
    },
    inputContainer: {
        height: 120,
        paddingVertical: 10,
        paddingHorizontal: 24,
        backgroundColor: "#fff",
        marginTop: 1
    }
});

 